<template>
 	<div class="StudentApply">
 		<el-input v-model="keyword" placeholder="请输入学号" class="input-with-select" style="width:50%">
 			<template #append>
 				<el-button @click="search">
 					<el-icon>
 						<Search />
 					</el-icon>
 				</el-button>
 			</template>
 		</el-input>
 		<el-button primary @click="addInit">提交调整申请</el-button>
 		<el-button primary @click="checkReport">查看待审核调整申请</el-button>
 		<p></p>
 		<el-table :data="tableData" style="width: 100%" :stripe="true" ref="multipleTable"
 			@selection-change="handleSelectionChange" :header-cell-style="{background:'#eef1f6',color:'#606266'}">

 			<el-table-column prop="no" label="学号" sortable align="center" />
 			<el-table-column prop="name" label="姓名" sortable width="90" align="center" />
 			<el-table-column prop="academy" label="学院" sortable width="90" align="center" />
 			<el-table-column prop="age" label="年龄" sortable width="90" align="center" />
 			<el-table-column prop="grade" label="班级" sortable width="90" align="center" />
 			<el-table-column prop="post" label="职位" sortable width="90" align="center" />
 			<el-table-column prop="counselor.counselor_name" label="辅导员" sortable width="90" align="center" />
 			<el-table-column prop="checkin_time" label="入住时间" sortable align="center" />
 			<el-table-column prop="checkin_status" label="入住状态" align="center" />
 			<el-table-column prop="dormitoryManagement.dorm_no" label="宿舍号" sortable width="90" align="center" />
 		</el-table>
 		<el-pagination small background layout="prev, pager, next" :page-size="pageSize" :page-count="pageCount"
 			:current-page="currentPage" @current-change="haddlePageChange" />


 		<!-- 增加对话框 -->
 		<el-dialog v-model="dialogVisible" title="提交申请" width="35%" draggable>
 			<!-- <span>增加</span> -->
 			<el-form :model="form" label-width="80px" :rules="formRules" class="demo-ruleForm">
 				<el-form-item label="宿舍楼">
 					<el-select v-model="form.dormitoryManagement.building" value-key="building" placeholder="请选择"
 						style="width:700px;"
 						@change="findDorm_no(form.dormitoryManagement.building),this.form.dormitoryManagement.dorm_no = null">
 						<el-option v-for="item in dormOption" :key="item.id" :label="item.building"
 							:value="item.building">
 						</el-option>
 					</el-select>
 				</el-form-item>
 				<el-form-item label="宿舍号">
 					<el-select v-model="form.dormitoryManagement.dorm_no" value-key="dorm_no" placeholder="请选择"
 						style="width:100%;">
 						<el-option v-for="item in dormOption" :key="item.id" :label="item.dorm_no"
 							:value="item.dorm_no">
 						</el-option>
 					</el-select>
 				</el-form-item>
 				<el-form-item label="学号" prop="student.no">
 					<el-input v-model="form.student.no" />
 				</el-form-item>
 				<el-form-item label="姓名" prop="student.name">
 					<el-input v-model="form.student.name" />
 				</el-form-item>
 				<el-form-item label="班级" prop="student.grade">
 					<el-input v-model="form.student.grade" />
 				</el-form-item>
 			</el-form>
 			<template #footer>
 				<span class="dialog-footer">
 					<el-button @click="dialogVisible = false">取消</el-button>
 					<el-button type="primary" @click="addSubmit()">提交</el-button>
 				</span>
 			</template>
 		</el-dialog>

 		<!--  待审核对话框 -->
 		<el-dialog v-model="checkreport" title="待审核申请" width="60%" draggable>
 			<el-table :data="checkReportData" style="width: 100%" :stripe="true" ref="multipleTable"
 				@selection-change="handleSelectionChange" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
 				<el-table-column prop="dormitoryManagement.dorm_no" label="宿舍号" sortable width="90" align="center" />
 				<el-table-column prop="student.no" label="学号" sortable align="center" />
 				<el-table-column prop="student.name" label="姓名" sortable width="90" align="center" />
 				<el-table-column prop="dormitoryManagement.building" label="宿舍楼" sortable width="90" align="center" />
 				<el-table-column prop="student.grade" label="班级" sortable width="90" align="center" />
 			</el-table>
 			<el-pagination small layout="prev, pager, next" :page-size="pageSize1" :page-count="pageCount1"
 				:current-page="currentPages" @current-change="haddlePageChange1" />
 		</el-dialog>
 	</div>
 </template>

 <script setup>
 	import {
 		ref,
 		toRefs,
 		reactive,
 		onMounted,
 		getCurrentInstance
 	} from 'vue'
 	let {
 		proxy
 	} = getCurrentInstance();
 	var tableData = ref([]);
 	var pageCount = ref(0)
 	var pageSize = ref(9)
 	var currentPage = ref(1)

 	function getTableData() {
 		var param = {
 			"pagination": {
 				"pageNo": currentPage.value,
 				"pageSize": pageSize.value
 			},
 			"conditionList": []
 		};
 		var jsonparam = JSON.stringify(param)
 		proxy.$http.post("StudentFindAll", jsonparam)
 			.then(res => {
 				tableData.value = res.data.records;
 				pageCount.value = Math.ceil(res.data.totalNum / pageSize.value);
 			})
 			.catch(err => {
 				console.log(err)
 			});
 	}
 	onMounted(() => {
 		getTableData()

 	});
 	function haddlePageChange(currentpage) {
 		currentPage.value = currentpage;
 		getTableData();
 	}
 	let dormOption = ref([]);
 	let form = ref({});
 	const dialogVisible = ref(false)
 	function addInit() {
 		form.value = {
 			"student": {
 				"no": "",
 				"name": "",
 				"grade": ""
 			},
 			"dormitoryManagement": {
 				"dorm_no": null,
 				"building": ""
 			}

 		}
 		dialogVisible.value = true
 		var pageSize = ref(100000)
 		var currentPage = ref(1)
 		var param = {
 			"pagination": {
 				"pageNo": currentPage.value,
 				"pageSize": pageSize.value
 			},
 			"conditionList": []
 		};
 		var jsonparam = JSON.stringify(param)
 		proxy.$http.post("/DormitoryManagementFindAll", jsonparam)
 			.then(res => {
 				dormOption.value = res.data.records;
 			})
 	}

 	function addSubmit() {
 		console.log(form)
 		proxy.$http.post("/ApplyAdd", JSON.stringify(form.value))
 			.then(res => {
 				dialogVisible.value = false	
 				getTableData();
 			})
 	}
 	//查看报修申请的page设置
 	var checkReportData = ref([]);
 	const checkreport = ref(false)
 	var pageCount1 = ref(0)
 	var pageSize1 = ref(8)
 	var currentPages = ref(1)

 	function checkReport() {
 		checkreport.value = true
 		var param = {
 			"pagination": {
 				"pageNo": currentPages.value,
 				"pageSize": pageSize1.value
 			},
 			"conditionList": []
 		};
 		var jsonparam = JSON.stringify(param)
 		proxy.$http.post("ManagementFindAllCtl", jsonparam)
 			.then(res => {
 				checkReportData.value = res.data.records;
 				pageCount1.value = Math.ceil(res.data.totalNum / pageSize1.value);
 			})
 			.catch(err => {
 				console.log(err)
 			});
 	}
 	function haddlePageChange1(currentpages) {
 		currentPages.value = currentpages;
 		checkReport();
 	}
 	//按关键字查询
 	const keyword = ref('')
 	let search = () => {
 		if (keyword.value == '') {
 			getTableData()
 			return false
 		}
 		var param = {
 			"no": keyword.value,
 		};
 		var jsonparam = JSON.stringify(param)
 		proxy.$http.get("/StudentFind" + '?no=' + keyword.value)
 			.then(res => {
 				tableData.value = [res.data]
 			})
 			.catch(err => {
 				console.log(err)
 			});
 	}

 	const isNum = (rule, value, callback) => {
 		const no = /^[0-9]*$/
 		if (value.length < 12 || value.length > 12)
 			callback(new Error('学号数字个数应为12'))
 		else if (!no.test(value)) {
 			callback(new Error('请输入数字!'))
 		} else {
 			callback()
 		}

 	};
 	const formRules = reactive({
 		'student.no': [{
 				required: true,
 				message: '请输入学号',
 				trigger: 'blur'
 			},
 			{
 				validator: isNum,
 				trigger: 'blur'
 			} 
 		],
 		'student.name': [{
 				required: true,
 				message: '请输入姓名',
 				trigger: 'blur'
 			},
 			{
 				min: 2,
 				max: 5,
 				message: '长度在 2 到 5 个字符',
 				trigger: 'blur'
 			}
 		],
 		'student.grade': [{
 				required: true,
 				message: '请输入班级',
 				trigger: 'blur'
 			},
 			{
 				min: 2,
 				max: 10,
 				message: '长度在 2 到 10 个字符',
 				trigger: 'blur'
 			}
 		],
 	})
 </script>
 //分页居中显示
 <style scoped>
 	.el-pagination {
 		justify-content: center;
 	}
 </style>
